<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新时代摄影</title>
    <link rel="stylesheet" href="exhibition.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            margin: 0;
        }

        header{
            background-color: #2e2e2e;
            min-width: 100%;
            margin: 0;
        }
        .cantainer{
            width: 1280px;
            height: 94px;
            margin: 0 auto;
        }
        .logo{
            font-size: 30px;
            color: #fff;
            margin-top: 23px;
            margin-bottom: 22px;
            float: left;
        }
        .header-right{
            margin-top: 40px;
            float: right;
            width: 720px;
            height: 27px;
        }

        .clearfix{
            padding-left: 40px;
            width: 320px;
            height: 27px;
            margin: 0;
        }
        .sc{
            width: 88px;
            height: 23px;
            margin: 5px 14px 0 0;
            float: left;
        }
        .sc>img {
            width: 23px;
            opacity: 0.6;
            margin-right: 3px;
        }
        .sc>span{
            color: #999999;
            font-size: 15px;
        }
        .zc{
            float: left;
            position: relative;

        }
        .zc>a{
            text-decoration: none;
            color: #888888;
            font-size: 20px;
        }
        .zc>a:hover{
            text-decoration: underline;
            color: chocolate;
        }
        form{
            float: left;
        }
        form input{
            background-color: #ffffff;

            height: 33px;
            border: 0;
            padding: 10px 20px;
            border-radius: 10px;
            color: black;
            outline: 0;/*去掉自带外边框*/
        }
        form button{
            background-color: rgba(0,0,0,0);
            border: 0;
            color: #a8a8a8;
            position: relative;
            right: 30px;
        }


        /*导航条样式*/
        .flt{
            background-color: #2e2e2e;
        }
        .n-nav{
            width: 1280px;
            height: 62px;
            margin: 0 auto;
        }
        .n-ul{
            width: 1280px;
            height: 62px;
        }
        .n-ul a:hover{
            color: chocolate;
            text-decoration: none;
        }
        .fl{
            float: left;
            position: relative;
            list-style-type: none;
        }
        .Moveout{
            float: left;
            position: relative;
            list-style-type: none;
        }
        nav>div>ul>li>a {
            width: 140px;
            text-align: center;
            padding: 19px 0px;
            display: block;
            text-decoration: none;
            color: #ffffff;
            left: 50px;
            font-size: 18px;
        }
        .Moveout>ul{
            padding-left: 0;
        }
        nav ul.li-yincang {
            z-index: 100;
            list-style-type: none;
            border: none;
            transition: 1s;
            background: #413d2f;
            position: absolute;
            left: 0px;
            top: 58px;
            width: 100%;
            text-align: center;
        }
        nav ul.li-yincang a {
            font-size: 14px;
            text-align: center;
            padding: 6px 0px;
            width: 100%;
            color: #ffffff;
            display: block;
        }

        /*section内容开始*/
        .main-left {
            float: left;
            width: 940px;
            background: #fff;
            padding: 30px;
            margin: 0;

        }
        .main-right{
            width: 200px;
            height: 504px;
            float: left;
            margin: 0;
            padding: 25px 20px;
        }
        /*主页左半部分的样式*/
        .mainsclearfix{
            height: 180px;
            display: block;
            margin-bottom: 60px;
        }
        .main-left{
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }

        .mainsclearfix>a{
            margin-bottom: 20px;
        }
        .main-left-llfl>img{
            margin: 0px;
            padding: 0px;
            float: left;
        }
        .main-left-lrfl{
            width: 540px;
            height: 197px;
            float: left;
            margin-left: 25px;
        }
        .main-left-lrfl>h3{
            font-size: 20px;
            color: #333333;
            height: 35px;
            margin: 0 0 8px 0;
            padding: 0px
        }
        .main-left-llfl>p{
            line-height: 22px;
            font-size: 15px;
            color: #707070;
            height: 66px;
            margin-bottom: 20px;
            font-weight: 500;
            overflow: hidden;
            padding: 0px;
        }
        .zuoclearfix{
            margin: 10px;
        }

        .zuoclearfix>.fl{
            float: left;
            position: relative;
            right: 8px;
            bottom: 2px;

        }
        .zuoclearfix>.fr{
            float: right;

        }

        /*主页右半部分*/
        .main-right{
            padding:20px 25px;
        }
        .main-right>p{
            font-size: 18px;
            color: #333333;
            margin-bottom: 10px;
            border-bottom: 1px solid
        }
        .gengduo>ul>li{
            padding: 20px 0 10px 0;
        }
        .gengduo>a{
            width: 148px;
            height: 28px;
            padding: 0px;
            border: 1px;

        }
        .gengduo>a>img{
            width: 28px;
            height: 18px;
            position: relative;

        }
        /*section内容结束*/


        /*脚部样式开始*/
        footer{
            flex: 0 0 auto;
            min-width: 100%;
            background: #2e2e2e;
            padding: 40px 0;
            margin-top: 50px;
            color: #ffffff;
        }
        .f-container {
            width: 1280px;
            height: 350px;
            margin: auto;
            padding: 0;

        }
        .ftt{
            border-bottom: 1px solid #666666;
            width: 1280px;
            height: 320px;
            padding-left: 0;
        }
        footer .ftt .lianxi {
            width: 325px;
            margin-bottom: 45px;
            margin-right: 130px;
        }
        .fy{
            float: left;
        }
        .fr{
            float: right;
        }
        footer .ftt .lianxi h3 {
            margin-bottom: 20px;
            font-size: 16px;
            color: #fff;
            font-weight: 300;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
        }
        .pc{
            border: 0;
            background-color: #2e2e2e;
            color: #ffffff;
            padding: 0;
        }
        footer .ftt .daohang {
            width: 340px;
        }
        footer .ftt .daohang h3 {
            margin-bottom: 20px;
            font-size: 16px;
            color: #fff;
            font-weight: 300;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
        }
        footer .ftt .daohang li a {
            display: block;
            color: #fff;
            font-size: 14px;
            width: 100%;
        }
        .f-ul{
            padding: 0;
            list-style-type: none;
        }
        .f-ul>li{
            width: 85px;
            text-align: left;
            float: left;
            margin-bottom: 15px;
        }
        footer .ftt .erwei {
            width: 325px;
            margin-top: 20px;
            padding-top: 50px;
        }
        footer .ftt .erwei img:nth-of-type(1) {
            margin-right: 60px;
        }
        footer .ftt .erwei img {
            border-radius: 5px;
        }
        footer .footer-bottom {
            margin-top: 18px;
        }
        footer .footer-bottom p{
            text-align: center;
        }
        footer .footer-bottom p span {
            margin-left: 34px;
        }
        /*脚部样式结束*/
    </style>
</head>
<body>
<!--头部布局开始-->
<header>
    <div class="cantainer">
        <div class="logo ">
            <a href=""><img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png" alt=""></a>
        </div>
        <div class="header-right">
            <a href="http://localhost:8080/login.html">
                <div class="sc" >
                    <img class="fl" src="http://www.shumasheying.org.cn/themes/index/public/assets/images/yun.png">
                    <span >上传作品</span>
                </div>
            </a>

            <form action="">
                <input type="text" name="keyword" placeholder="搜索你喜欢的">
                <button type="button" @click="search()">
                    <i class="fa fa-search"></i>
                </button>

            </form>
            <div v-if="user==''" class="zc">
                <a href="/login.html">登陆</a>
                <span>|</span>
                <a href="/reg.html">注册</a>
            </div>

        </div>
    </div>
</header>
<!--头部布局结束-->
<!--导航条布局开始-->
<nav class="flt">
    <div class="n-nav">
        <ul class="n-ul">
            <li class="Moveout"><a id="active" href="/">首页</a></li>
            <li v-for="c in c_arr" class="Moveout">
                <a  href="/activity.html">{{c.name}}</a>
            </li>

            <li class=" Moveout Mt"  id="Mt" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">
                <a target=""  href="">作品&amp;影展</a>
                <ul style="display: none" id="ct" class="li-yincang" >
                    <li><a href="/work.html">摄影作品</a></li>
                    <li><a href="/festival.html">在线影展</a></li>
                </ul>
            </li>
            <li class=" Moveout Mb"  id="Mb" onmouseover="Moveoutsover1()" onmouseout="MoveoutSout1()">
                <a target=""  href="">会员服务</a>
                <ul style="display: none"  id="cb" class="li-yincang" >
                    <li><a href="/camerist.html">会员细则</a></li>
                    <li><a href="/famous.html">著名摄影师</a></li>
                    <li><a href="/excellent.html">优秀摄影师</a></li>
                </ul>
            </li>
            <li class=" Moveout Mc"  id="Mc" onmouseover="Moveoutsover2()" onmouseout="MoveoutSout2()">
                <a target=""  href="">关于我们</a>
                <ul style="display: none" id="cd"  class="li-yincang" >
                    <li><a href="/summary.html">新时代简介</a></li>
                    <li></li><a href="/about.html">联系我们</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!--导航条布局结束-->


<div class="container">
    <!--主要内容左半部分开始-->
    <div class="container clearfix" style="border: blue">
        <div class="main-left" >
            <div class="mainsclearfix" id="main-exhibition"  >
                <a href="#" v-for="e in arr">
                    <div class="main-left-llfl">
                        <img :src="e.url"/>
                    </div>
                    <div class="main-left-lrfl">
                        <h3 >{{e.title}}</h3>
                        <p >{{e.content}}</p>
                        <div class="zuoclearfix">
                            <div class="fl">作者：{{e.author}}</div>
                            <div class="fr">{{e.created}}</div>
                        </div>
                    </div>
                </a>
            </div>

            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
        <!--主要部分左半部分结束-->

        <!--主要部分右半部分开始-->
        <div class="main-right">
            <p>相关文章</p>
            <div class="gengduo">
                <ul>

                    <li>
                        <a href="#">
                            <p class="clearfix"><img class="fl" src="" />封面嘉宾 | 陈桥顿...</p>
                            <span>2019-03-04</span>
                        </a>
                    </li>


                    <li>
                        <a href="#">
                            <p class="clearfix"><img class="fl" src="" />用手中的镜头，刻画石...</p>
                            <span>2019-03-04</span>
                        </a>
                    </li>


                    <li>
                        <a href="#">
                            <p class="clearfix"><img class="fl" src="" />记录完整事件 留下最...</p>
                            <span>2019-03-04</span>
                        </a>
                    </li>


                    <li>
                        <a href="#">
                            <p class="clearfix"><img class="fl" src="" />摄影是身边的“好伙伴...</p>
                            <span>2019-03-04</span>
                        </a>
                    </li>


                    <li>
                        <a href="http://www.shumasheying.org.cn/themes/index/public/assets/images/syhd_dian.jpg">
                            <p class="clearfix"><img class="fl" src="" />走进光和影的瞬间，是...</p>
                            <span>2019-03-04</span>
                        </a>
                    </li>

                </ul>
                <a href="http://www.shumasheying.org.cn/themes/index/public/assets/images/syhd_dian.jpg">MORE
                    <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/jiantou.png" />
                </a>
            </div>
        </div>
        <!--主要部分右半部分结束-->
    </div>
</div>
<!--脚部区域布局开始-->
<footer>
    <div class="f-container">
        <div class="ftt ">
            <div class="lianxi fy">
                <h3>联系我们</h3>
                <p>北京总部</p>
                <p>地  址：北京市石景山区阜石路166号泽洋大厦713室</p>
                <p>邮  编：100001</p>
                <!--<pre class="pc">电  话：010-52638701 010-52638749  0372-3668876</pre>-->
                <p>E-mail：xinshidaisheyingjia2018@aliyun.com</p>
                <p>安阳分社</p>
                <p>地  址：河南省安阳市万达广场SOHO公寓B座</p>

                <pre class="pc">电  话：0372-5023007  0372-3978876</pre>

            </div>
            <div class="daohang fy">
                <h3>网站导航</h3>
                <ul class="clearfix f-ul">
                    <li class="fl"><a href="/">首页</a></li>
                    <li class="fl"><a href="/activity.html">摄影赛事</a></li>
                    <li class="fl"><a href="/reflex.html">热门影展</a></li>
                    <li class="fl"><a href="/magazine.html">摄影杂志</a></li>
                    <li class="fl"><a href="http://www.sheyingyou.cn/">摄影旅游</a></li>
                    <li class="fl"><a href="/creation.html">用品超市</a></li>
                    <li class="fl"><a href="Javascript:;">资讯动态</a></li>
                    <li class="fl"><a href="Javascript:;">作品&amp;影展</a></li>
                    <li class="fl"><a href="Javascript:;">全国理事会</a></li>
                    <li class="fl"><a href="Javascript:;">会员服务</a></li>
                    <li class="fl"><a href="Javascript:;">关于我们</a></li>
                    <li class="fl"><a href="/sitemap.html">网站地图</a></li>
                </ul>
            </div>
            <div class="erwei fr">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/934b656b7173258b84a6c0af2fd940da.jpg">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/dabcf8c159d41ed632d0e89f46179016.jpg">
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p>版权所有 Copyright © 2019 北京天之星文化传媒中心 All Rights Reserved <span>备案序号：<a href="https://beian.miit.gov.cn/" style="color:white;">京ICP备13014113号-4</a></span><span></span> </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <div style="position: fixed; z-index: 99999; top: 20%; right: 20px;">
        <!-- <a href="http://www.shumasheying.org.cn/celebrity%20interview/977.html"> -->
        <a href="http://www.shumasheying.org.cn/creation.html">
            <img src="/themes/index/public/assets/images/right117.jpg" alt="">
        </a>
    </div>
    <div style="position: fixed; z-index: 99999; top: 20%; left: 20px;">
        <a href="http://www.shumasheying.org.cn/reflex/2440.html">
            <img src="/themes/index/public/assets/images/left117.jpg" alt="">
        </a>
    </div>
</footer>
<!--脚部区域布局结束-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script>
    let vm = new Vue({
        el:"#main-exhibition",
        data:{
            arr:[],
        },
        created:function () {
            axios.get("/exh/selectAll").then(function (response) {
                vm.arr=response.data;
            })
        }
    })
</script>

</body>
</html>
